<template>
  <zm-popup :show="visible" :max-height="maxHeight" closeable mode="bottom" border-radius="24rpx" safe-area-inset-bottom :background="useColor('page')" @close="close">
    <!-- 支付信息 -->
    <view v-if="$slots.payHeader" slot="header">
      <slot name="payHeader"></slot>
    </view>
    <view v-else slot="header" class="pay-way-popup_top p-24 text-333 font-bold">
      <view class="flex items-center justify-center font-32 mb-20">支付订单</view>
      <view class="items-baseline pay-way_price justify-center flex">
        <text>{{ showPrice }}</text>
        <text class="font-30 ml-10">元</text>
      </view>
    </view>
    <view class="pay-way-popup_content relative p-24">
      <!-- 支付方式 -->

      <view v-if="hasSelfPay" class="pay-way_self radius-16 bg-white mb-20">
        <view class="flex pl-24 pt-36 pb-30 solid-bottom-1 items-center">
          <image :src="useImage('/zuimei-film-oss/1.0.0/icons/icon-wallet.png')" class="icon-wallet" mode="scaleToFill"></image>
          <text class="ml-12 font-bold font-32">自有账户</text>
        </view>
        <zm-checkbox-group v-model="selfCheckList" icon-radius="4rpx" icon-size="28rpx" icon-placement="right" custom-class="flex-wrap">
          <zm-checkbox
            v-if="hasIntegralPay"
            label-left
            name="integral"
            :disabled="calcMaxIntegralCut(true) == 0"
            :active-color="useColor('theme')"
            border-bottom
            custom-class="w-full justify-between items-center solid-bottom-1 pay-item-line pr-24"
          >
            <pay-way-cell title-size="30" title="积分">
              <view slot="desc" class="font-26 text-666">
                <text>剩余</text>
                <text :style="[useThemeStyle()]" class="ml-6 mr-6">{{ accountInfo.integral }}</text>
                <text>点</text>
                <text>当前最多可用</text>
                <text :style="[useThemeStyle()]" class="ml-6"> {{ calcMaxIntegralCut(true) }}</text>
                <text>点</text>
              </view>
              <view v-if="caclIntegralCut() > 0" slot="discount" class="ml-auto mr-30 font-26 text-price">-￥{{ caclIntegralCut() }}</view>
            </pay-way-cell>
          </zm-checkbox>
          <zm-checkbox
            v-if="hasBalancePay"
            :disabled="preInfo.needPay == 0 || accountInfo.balance <= 0"
            label-left
            name="balance"
            custom-class="items-center justify-between w-full pr-24"
            :active-color="useColor('theme')"
            border-bottom
          >
            <pay-way-cell title-size="30" title="账户余额">
              <view slot="desc" class="font-26 text-666">
                <text>当前最多可用</text>
                <text class="ml-6" :style="[useThemeStyle()]">{{ accountInfo.balance }}</text>
                <text>元</text>
              </view>
              <view v-if="caclBalanceCut() > 0" slot="discount" class="ml-auto mr-30 font-26 text-price">-￥{{ caclBalanceCut() }}</view>
            </pay-way-cell>
          </zm-checkbox>
        </zm-checkbox-group>
      </view>
      <view class="pay-way_third radius-16 bg-white">
        <u-radio-group v-model="payType" icon-placement="right" custom-class="flex-wrap">
          <u-radio v-for="(item, index) in payWayList" :key="index" :name="item.type" size="40rpx" :active-color="useColor('theme')" custom-class="w-full pr-24 solid-bottom-1 pay-item-line">
            <pay-way-cell :pay-type="item.type" :desc="item.describe" :icon="item.image" :title="item.name"></pay-way-cell>
            <zm-icon slot="icon" name="check" color="#fff" size="28rpx" weight="bold"></zm-icon>
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <!-- 支付按钮 -->
    <view v-if="$slots.payFooter" slot="footer">
      <slot name="payFooter"></slot>
    </view>
    <view v-else slot="footer" class="p-24">
      <zm-button height="100rpx" text-size="32rpx" size="large" round @click="submitPay">确认支付</zm-button>
    </view>
  </zm-popup>
</template>

<script>
/**
 * @des 支付方式弹窗
 * @param {object} options 支付方式配置
 * 基础配置
 * @param {string} options.orderType - 订单类型（权益卡充值：equityCard，余额充值：accoutRecharge，电影卡充值：cardRecharge， 影票 film ， 商品 goods，  卖品 mall）（必传）
 * @param {Boolean} hasBalancePay -是否余额支付（非必传）
 * @param {Boolean} hasIntegralPay - 是否积分支付（非必传）
 * @param {Boolean} options.jumpType - 跳转支付等待页面方式（非必传）
 * @param {string} options.filmOrderId - 影片订单id（影票订单必传）
 * @param {string} options.cinemaId - 影院id （影票订单必传）
 * @param {string} options.goodsOrderId - 卖品订单id （商品订单必传）
 * @param {string} options.mallOrderId - 套票订单id （套票订单必传）
 * @param {string} options.zoneId - 分区商品广告类型shoppingMallZone 时候传（非必传）
 * @param {string} options.activityId - 活动id（非必传）
 * @param {string|Number} options.showNeedPay - 用于展示的支付金额（存在原价和折扣价时候使用），非最终支付金额（非必传）
 * 预支付字段
 * @param {object} options.preInfo -  预支付信息 （必传）
 * @param {string|Number} options.preInfo.needPay  支付金额（包含已扣除卡券优惠，还未扣除积分和余额）（任何类型都必传）
 * @param {string} options.preInfo.orderId 影片订单id（影票订单必传）
 * @param {object} options.preInfo.film  影片订单折扣信息（影票订单必传）
 * @param {string|Number} options.preInfo.film.filmPrice  影片总价（影票订单必传）
 * @param {object} options.preInfo.film.cardInfo  影片使用的卡（影票订单必传）
 * @param {Array} options.preInfo.film.coupons  影片使用的券（影票订单必传）
 * @param {string|Number} options.preInfo.film.discount  影片用卡券折扣后的价格（影票订单必传）
 * @param {object} options.preInfo.film.otherPayInfo  影片订单优惠（影票订单必传）
 * 额外支付字段（例如卡充值）
 * @param {object} options.query - 个别类型支付需要额外带的参数（目前电影卡充值必传）
 * @param {string} options.query.programId  充值规则id（电影卡充值必传）
 * @param {string} options.query.point  充值点数（电影卡充值必传）
 * @param {string} options.query.ruleKey  充值金额项的规则key（电影卡充值必传）
 * @param {string} options.query.cardId  要充值卡的id（电影卡充值必传）
 * 支付成功回调
 * @param {function} options.success  获取到订单支付成功后的回调（非必传）
 * 继续支付字段
 * @param {Boolean} options.isContinuePay  是否继续支付（非必传）默认false, 此时只需要传orderType,orderId,和preInfo.needPay
 * @param {string} options.orderId  订单id（继续支付必传）
 */
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
import global from "@/mixins/global"
import prePay from "./mixins/prePay"
import pay from "./mixins/pay"
import payWayCell from "./components/pay-way-cell"
import account from "./mixins/account"
export default {
  name: "pay-way-popup",
  components: { payWayCell },
  mixins: [hook, weixin, global, prePay, pay, account],
  props: {
    hasBalancePay: {
      type: Boolean,
      default: false
    },
    hasIntegralPay: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: String,
      default: "60vh"
    },
    balanceDiscount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 调用支付组件需要传的参数
      options: {
        // hasBalancePay: false, // 是否余额支付
        // hasIntegralPay: false, // 是否积分支付
        // orderType: "", // 订单类型（充值：equityCard， 电影 film ， 商品 goods，  卖品 mall）
        zoneId: "", // 分区商品广告带的id
        activityId: "", // 活动id
        cinemaId: "", // 影院id
        showNeedPay: 0, // 用于展示的支付金额（存在原价和折扣价时候使用），非最终支付金额
        jumpType: "navigateTo",
        query: {}, // 个别类型支付需要额外带的参数
        preInfo: {
          needPay: 0 // 需要支付的金额（未扣除积分和余额）
        } // 预支付信息
      },
      visible: false,
      payWayList: [], // 后台配置的支付方式
      // 余额积分账户信息
      accountInfo: {
        balance: 0,
        integral: 0,
        maxIntegral: 0,
        integralFilm: {},
        integralGoods: {}
      },
      preInfo: {}, // 预支付信息
      selfCheckList: [], // 选中的自有账户
      payType: "" // 支付方式
    }
  },
  computed: {
    // 判断是否存在自有账户
    hasSelfPay() {
      return this.hasBalancePay || this.hasIntegralPay
    },
    // 最终付款(扣除积分和余额)
    needPay() {
      const integralCut = this.isNaNStr(this.caclIntegralCut())
      const balanceCut = this.isNaNStr(this.caclBalanceCut())
      const money = this.$u.minus(+this.preInfo.needPay, integralCut, balanceCut)
      if (this.options.orderType == "film" && this.options?.preInfo?.film?.vipCardPrice) {
        return this.$u.plus(money, this.options.preInfo.film.vipCardPrice)
      }
      return money
    },
    // 展示的价格
    showPrice() {
      return this.options.vipDiscountMoney || this.needPay
    }
  },
  methods: {
    show(options) {
      this.options = uni.$merge(this.options, options)
      this.getPayWay()
      if (this.hasBalancePay || this.hasIntegralPay) {
        this.getPayOtherInfo()
      }
    },
    // 唤起支付组件
    open(options) {
      this.options = uni.$merge(this.options, options)
      this.preInfo = options.preInfo
      if (options.orderType != "film" && +options.preInfo.needPay == 0) {
        // 非影票支付
        this.submitPay()
      } else if (options.orderType == "film" && +options.preInfo.allNeedPayPrice == 0) {
        // 影票支付且没有选中会员卡
        this.submitPay()
      } else {
        this.getPayWay()
        if (this.hasBalancePay || this.hasIntegralPay) {
          this.getPayOtherInfo()
        }
      }
    },
    /**
     * @description 获取后台配置的支付方法
     * @param {*} options 接口参数
     * @param {string} options.orderType - 订单类型
     * @param {string} options.cinemaId - 影院id
     * @param {string} options.zoneId - 广告类型shoppingMallZone 时候传
     * @param {string} options.activityId - 活动id
     * @return {array} 支付方式数组
     */
    getPayWay() {
      const { orderType, cinemaId, zoneId, activityId } = this.options
      uni.$api.mall.getPayWay({ orderType, cinemaId, zoneId, activityId }).then((res) => {
        this.payWayList = res || []
        if (this.payWayList.length == 1 && !this.hasBalancePay && !this.hasIntegralPay) {
          this.payType = this.payWayList[0].type
        }
        this.visible = true
      })
    },
    /**
     * @description 获取用户账户余额、积分
     * @param {*} options 接口参数，只需要当前支付的订单类型id
     * @param {string} options.filmOrderId - 影票类型
     * @param {string} options.goodsOrderId - 卖品类型
     * @param {string} options.mallOrderId - 套票类型
     * @return {object} 用户账户余额、积分
     */
    getPayOtherInfo() {
      const { filmOrderId, goodsOrderId, mallOrderId } = this.options
      const query = this.orderType == "equityCard" ? "" : { filmOrderId, goodsOrderId, mallOrderId }
      uni.$api.orderFilm.getPayOtherInfo(query).then((res) => {
        if (mallOrderId) {
          res.integralGoods = res.integralMall
        }
        this.accountInfo = res
      })
    },
    updatePayInfo(options) {
      this.options = uni.$merge(this.options, options)
    },
    // 关闭
    close() {
      this.visible = false
      this.reset()
    },
    // handleAccountChange(e) {
    //   if (this.options.orderType == "equityCard") {
    //     console.log(this.accountInfo)
    //     this.$emit("changeBalance", { balance: this.isNaNStr(this.accountInfo.balance), check: e.includes("balance") })
    //   }
    // },
    // 重置选择
    reset() {
      this.selfCheckList = []
      this.payType = ""
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-way_price {
  font-size: 68rpx;
}
::v-deep .pay-item-line {
  position: relative;
}
::v-deep .pay-item-line::after {
  left: 66rpx;
}

.pay-way-popup_content {
  .pay-way_self {
    .icon-wallet {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
